<html>
<head>
  <title></title>
  <script type="text/javascript" src="jquery-1.2.6.min.js" ></script>
  <script type="text/javascript" src="jquery.disable.text.select.js" ></script>
  <script type="text/javascript" src="master_raphael-packed.js" ></script>
  <script type="text/javascript">
      var click = false;
      var brushColour = "#ff0";
      var prevX = '';
      var prevY = '';
      var brushSize = 10;

      $(document).ready(function(){
          $("#eisel").attr('UNSELECTABLE', 'on');
          var paper = Raphael("canvas", 320, 200);
          $("#canvas").mousemove(function(e){
              if(click){
                  $("#canvas").disableTextSelect();
                  var mouseX = e.pageX - this.offsetLeft;
                  var mouseY = e.pageY - this.offsetTop;
                  if(prevX && prevY){
                      var circle = paper.path({
                                    "stroke-width": 10,
                                    stroke: brushColour,
                                    "stroke-linecap": "round"
                        }).moveTo(prevX, prevY).lineTo(mouseX, mouseY);
                  } else {
                      var circle = paper.circle(mouseX, mouseY, brushSize/2);
                      circle.attr("fill", brushColour);
                  }
                  prevX = mouseX;
                  prevY = mouseY;
              }
          });
          $("#canvas").mousedown(function(e){
              click=true;
          });
          $("#canvas").mouseup(function(){
              click=false;
              prevX = false;
              prevY = false;
              $("#canvas").enableTextSelect();
          });
          $("#clear").click(function(){
              $("#clear").html("Please wait").attr('disabled','disabled');
              $("#canvas > svg").remove();
              paper = Raphael("canvas", 320, 200);
              $("#clear").html("Clear").attr('disabled','');
          });
      });
  </script>
  <style>
      #canvas{
          width: 320px;
          height: 200px;
          background-color: #fff;
      }
  </style>

</head>
    <body>
        <div id="eisel" unselectable="on">
            <div id="tools"><button id="clear">Clear</button></div>
            <div id="canvas">
            </div>
        </div>
    </body>
</html>